<template>
  <div class="ext-pop">
    <el-card class="card" v-if="isLogin">
      <div slot="header" class="header">
        <span>登录信息</span>
        <el-button type="primary" @click="logout">登出</el-button>
      </div>
      <div class="item">
        <div class="key">账号：</div>
        <div class="value">{{loginInfo.account}}</div>
      </div>
      <div class="item">
        <div class="key">部门：</div>
        <div class="value">{{loginInfo.department}}</div>
      </div>
      <div class="item">
        <div class="key">岗位：</div>
        <div class="value">{{loginInfo.position}}</div>
      </div>
      <div class="item">
        <div class="key">登录时间：</div>
        <div class="value">{{loginInfo.loginTime}}</div>
      </div>
    </el-card>
    <el-card class="card" v-else>
      <div slot="header" class="header">
        <span>登录信息</span>
      </div>
      <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-width="65px">
        <el-form-item label="账号：" prop="account">
          <el-input v-model="loginForm.account"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input v-model="loginForm.password" type="password"></el-input>
        </el-form-item>
        <div class="toolbar">
          <el-button type="primary" @click="login">登录</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import moment from 'moment';

  export default {
    name: 'app',
    data() {
      return {
        sendResp: '',
        isLogin: false, // 是否已登录
        account: '', // 账号
        password: '', // 密码
        loginInfo: {},
        loginForm: {
          account: 'test',
          password: '123456',
        },
        loginRules: {
          account: [
            {required: true, message: '请输入账号', trigger: 'blur'},
            {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
          ],
        }
      };
    },

    async mounted() {
      this.loginInfo = await this.$storage.get(this.STORAGE_DEFINE.LOGIN_INFO) || {};
      console.log('loginInfo:', this.loginInfo);
      this.isLogin = this.loginInfo && this.loginInfo.account;
    },

    methods: {
      // 登录
      async login() {
        this.$refs['loginForm'].validate(async (valid) => {
          console.log('login valid:', valid);
          if (valid) {
            await this.$storage.set(this.STORAGE_DEFINE.LOGIN_INFO, {
              account: 'test',
              name: '张三',
              department: '营业部',
              position: '营业员',
              loginTime: moment().format('YYYY-MM-DD HH:mm:ss'),
            });
            this.$contentMessage('登录成功');
            window.close();
          } else {
            return false;
          }
        });
      },

      // 登出
      async logout() {
        await this.$storage.set(this.STORAGE_DEFINE.LOGIN_INFO, null);
        this.$contentMessage('登出成功');
        window.close();
      },
    },
  };
</script>

<style lang="less">
  .ext-pop {
    width: 250px;
    .el-input__inner {
      height: 28px;
    }

    .card {
      .header {
        margin: -5px 0;
        > span {
          font-size: 14px;
          font-weight: 600;
        }
        > button {
          float: right;
          padding: 5px 10px;
          margin-top: -3px;
          margin-bottom: 15px;
        }
      }
      .toolbar {
        margin: 10px 5px 0 0;
        > button {
          float: right;
          padding: 5px 10px;
          margin-top: -3px;
          margin-bottom: 15px;
        }
      }
      .item {
        line-height: 20px;
        height: 20px;
        margin-bottom: 10px;
        font-size: 13px;
        clear: both;
        .key {
          float: left;
          text-align: left;
          width: 75px;
          font-weight: bold;
        }
        .value {
          float: left;
        }
      }
      /deep/ .el-form {
        margin-left: -8px;
      }
      /deep/ .el-form-item {
        margin-bottom: 8px;
      }
      /deep/ .el-form-item__error {
        padding-top: 0;
        top: 92%;
      }
    }
  }
</style>
